<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>动画-案例《手风琴》</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
        width: 2400px;
      }

      #box {
        width: 1200px;
        height: 400px;
        border: 1px solid red;
        margin: 100px auto;
        overflow: hidden;
      }

      #box li {
        width: 100px;
        height: 400px;
        float: left;
        transition: all 0.5s ease-out;
      }

      #box li.over {
        width: 800px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <li v-for="(item,index) in list" :class="{ over:overIndex==index }" @mouseover="doOver(index)">
          <img :src="list[index]" alt="" />
        </li>
      </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
      let app = new Vue({
        el: '#box',
        data: {
          overIndex: 0,
          list: [
            './images/collapse/1.jpg',
            './images/collapse/2.jpg',
            './images/collapse/3.jpg',
            './images/collapse/4.jpg',
            './images/collapse/5.jpg'
          ],
          timeID:null
        },
        methods: {
            doOver(index){
                //1.每一次触发事件，先清除上一次定时器。以本次为准
                clearTimeout(this.timeID)
                //2.开启定时器间隔0.2s执行（防抖间隔）
                this.timeID = setTimeout(()=>{
                    this.overIndex = index
                },200)
               
            }
        },
      })
    </script>
  </body>
</html>
